<template>
  <div>
    <div>父组件中 {{ name }}</div>
    <hr>
    <!-- 如果不加sync，当子组件要修改父组件时，这里还需要接收一下子组件的方法 -->
    <child :name.sync="name"></child>
    <hr>
    <button @click="change">在父组件中修改</button>
  </div>
</template>
 
<script>
import child from '@/components/SyncChild'

export default {
  name: 'syncCom',
  components: {
    child
  },
  data () {
    return {
      name: 'xiaoming'
    }
  },
  methods: {
    change() {
      this.name = '123';
    }
  }
}
</script>